<template>
	<page-meta>
	    <navigation-bar
			title="设备健康度分析"
			background-color="#EEEEEE"
			front-color="#ffffff "
	    />
	</page-meta>
	<view style="height: calc(100% - 30px);">
		<uni-section title="重要设备健康数" type="line"></uni-section>
		<view class="healthBg" style="text-align: center; margin: 50upx; margin-left: 22%;">
			<view class="healthNum" style="background-image: url(../../../static/img/analysis/healthBg.png); height: 470upx; width: 400upx;">
				<view style="padding-top: 205upx;">
					<text class="uni-title" style="color: #F4F5F6;">健康指数</text>
					<text class="uni-text healthNumber" style="font-size: 50upx;color: #F4F5F6;padding-left: 20upx;">{{healthIndex}}</text>
				</view>
			</view>
		 </view>
		<echarts :option="healthNumPoi" style="height: 300px;" ></echarts>
		
		<uni-section title="重要设备风险指数排行榜" type="line"></uni-section>
		<echarts :option="maintainOption" style="height: 300px;" ></echarts>
		
		<uni-section title="重要设备健康度" type="line"></uni-section>
		<z-table
			:tableData="realTimeAlertList" 
			:columns="realTimeAlertTableColumns" 
			:textAlign="'center'" 
			:titleTextAlign="'center'"></z-table>
			<uni-pagination title="标题文字" :total="realTimeAlertTotal" @change="pageChange" pageSize="10"></uni-pagination>
	</view>
</template>

<script>

import {maintainOption, majorOption} from '@/static/js/analysisOfAlarmDataOptions.js'
import {healthNumPoi,risk} from '@/static/js/analysisEPTHealth.js'
import minPicker from '@/components/min-picker/min-picker.vue'
import minPopup from '@/components/min-picker/min-popup.vue'
import xflSelect from '@/components/xfl-select/xfl-select.vue'
import zTable from "@/components/z-table/z-table.vue"
import uniPopup from '@/components/uni-popup/uni-popup.vue'
import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
import uniDrawer from "@/components/uni-drawer/uni-drawer.vue"
import uniIcons from "@/components/uni-icons/uni-icons.vue"
import uniFab from '@/components/uni-fab/uni-fab.vue'
import Echarts from '@/components/echarts/echarts.vue'
import uniPagination from '@/components/uni-pagination/uni-pagination.vue'

export default {
	name: 'comprehensiveInfo',
	data () {
		return {
			currentPageNum:'1',
			stationAlarmTop:{},
			healthIndex:'',
			healthNumPoi:{},
			realTimeAlertList: [],
			maintainOption: {},
			majorOption: {},
			startTimes:[2010,6,1],
			endTime: 2100,
			show:false,
			realTimeAlertTotal: 0,
			queryParam: {
				alarmStation: "",
				alarmSystem: "",
				endDate: "",
				pageNo: 1,
				pageSize: 15,
				rank: "",
				startDate: "",
			},
			realTimeAlertTableColumns: [
				{
					title: '序号',
					key: 'deviceId',
					width: 250
				},
				{
					title: '设备类型',
					key: 'deviceName',
					width: 250
				},
				{
					title: '故障设备数',
					key: 'deviceNum',
					width: 250
				},
				{
					title: '设备总数',
					key: 'deviceSum',
					width: 250,
					format: '紧急1;高2;中3;低'
				},
				{
					title: '风险指数',
					key: 'riskIndex',
					width: 250,
					// format: '已恢复1;未恢复'
				}
			]
		}
	},
	methods: {
		//-------------------echarts图形-------------------------------
		initHealthNumPoi() {
			this.$myRequest({
				url: '/alarm/inportDeviceRiskIndex',
				method: 'GET'
			}).then(rep => {
				this.stationAlarmTop = rep.data;
				this.maintainOption = risk(this.stationAlarmTop);
			});
			
		},
		initMajorOption () {
			this.$myRequest({
				url: '/alarm/indexImportDevice',
				method: 'GET'
			}).then(rep => {
				this.healthIndex = rep.data.healthIndex;
				this.healthNumPoi = healthNumPoi(this.healthIndex);
			});
		},
		initTableData () {
			let flgIndex = 0;
			this.$myRequest({
				url: '/alarm/healthImportDevice',
				method: 'GET',
				data:{
						curPage:this.currentPageNum,
						limit:'10'
					 }
			}).then(rep => {
				this.realTimeAlertTotal = rep.total;
				var lists = rep.data;
				var redList = [];
				for(let ij = (this.currentPageNum-1)*10; ij < this.currentPageNum*10;ij++){
					if(ij<lists.length){
						redList[flgIndex] = lists[ij];
						flgIndex++;
					}
				}
				this.realTimeAlertList = redList;
			});
		},
		pageChange (e) {
			this.currentPageNum = e.current;
			this.initTableData();
		}
	},
	components: {
		Echarts,
		minPicker,
		minPopup
	},
	mounted () {
		this.initHealthNumPoi()
		this.initMajorOption()
		this.initTableData()
	}
}
</script>

<style>
	.ec-canvas {
	        display: flex;
	        height: 100%;
	        flex: 1;
	    }
	
	.canvasView {
		width: 700upx;
		height: 650upx; 
	}
	
	.stationFaultTable {
		height: 650upx; 
	}
	
	.queryButton {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: flex-start;
		padding: 5upx 0;
	}
</style>
